<template>
	<view class="row">
		<view class="left">
			<uni-icons :type="leftIcon" size="20" class="left-icon"></uni-icons>
			<text class="text">{{ leftName }}</text>
		</view>
		<view class="right">
			<text v-if="rightNum" class="text">{{ rightNum }}</text>
			<uni-icons type="right" size="15" color="#aaa"></uni-icons>
		</view>
		<slot />
	</view>
</template>

<script setup>
defineProps({
	leftIcon: {
		type: String,
		default: ''
	},
	leftName: {
		type: String,
		default: ''
	},
	rightNum: {
		type: [String, Number],
		default: undefined
	}
})
</script>

<style lang="scss" scoped>
.row {
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	border-bottom: 1px solid #eee;
	height: 100rpx;
	background-color: #fff;
	.left {
		display: flex;
		align-items: center;
		.text {
			padding-left: 20rpx;
			color: #666;
		}
		:deep(.uni-icons) {
			color: $brand-theme-color !important;
		}
	}
	.right {
		display: flex;
		align-items: center;
		.text {
			font-size: #aaa;
			color: #aaa;
		}
	}
}	       
</style>